<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/WEB-INF/views/common/meta.html" />
    <title>设备监控</title>
    <#include "/WEB-INF/views/common/css.html"/>
    <link rel="stylesheet" type="text/css" href="/static/themes/css/login_v2.css"/>
</head>
<body style="background-color: #343444;">
<header class="mui-bar mui-bar-nav bg-blue" style="background-color: #343444">
    <h1 class="mui-title">设备监控</h1>
</header>

<div class="mui-content" style="background-color: #343444;">
    <div class="mui-card-content" style="text-align: center;">
        <div style="height:60px;">&nbsp;</div>
        <div style="font-size:26px; color:#ffffff; line-height: 32px; font-weight: bolder">杭州环众焊接</div>
        <div style="font-size:26px; color:#ffffff; line-height: 36px; font-weight: bolder">数据无线传输管理平台</div>
        <div style="height:30px;">&nbsp;</div>
        <img style="width:80%" src="/static/themes/images/login/brand-img.png">
        <div style="height:20px;">&nbsp;</div>
    </div>
    <form id='login-form' style="margin:0 25px; background-color: #343444;">
        <div class="mui-input-row">
            <label><img src="/static/themes/images/login/icon-1.png" width="28" /></label>
            <input id='userName' type="text" class="mui-input-clear mui-input" placeholder="用户名"/>
        </div>
        <div style="height:10px;">&nbsp;</div>
        <div class="mui-input-row" style="background-color: #484855;">
            <label><img src="/static/themes/images/login/icon-2.png" width="22" /></label>
            <input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码"/>
        </div>
    </form>
    <div class="mui-content-padded" style="margin:0 48px;; text-align: center;">
        <div style="height:30px;">&nbsp;</div>
        <button id='login' class="mui-btn mui-btn-block mui-btn-primary" onclick="login();">登录</button>
    </div>
</div>
</body>
<#include "/WEB-INF/views/common/js.html"/>
<script type="text/javascript">
    function login() {
        store.set("userName", $("#userName").val());
        store.set("password", $("#password").val());
        $.post("/user/ajaxLogin", {
            userName: $("#userName").val(),
            password: $("#password").val()
        }, function (result) {
            if (result.success) {
                window.location.href = "/";
            } else {
                alert(result.message);
            }
        }, "json");
    }

    $(function () {
        $("#userName").val(store.get("userName"));
        $("#password").val(store.get("password"));
        $('body').bind('keyup', function (event) {
            if (event.keyCode == "13") {
                login();
            }
        });
    });
</script>
</html>